<template>
  <div>
    <!-- 面包屑导航 -->
    <el-bread></el-bread>
    <div class="add">
      <el-button round type="primary" plain @click="addmenu">新增</el-button>
    </div>
    <el-table :data="menulists" style="width: 100%" row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="tab">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column prop="title" label="菜单标题" width="180" />
      <el-table-column prop="icon" label="菜单图标">
        <template v-slot="$props">
          <el-icon :class="$props.row.icon">
            <Message />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="菜单地址" />
      <el-table-column prop="status" label="菜单状态">
        <template v-slot="$prop">
          <el-button type="primary" round size="small" plain v-if="$prop.row.status == 1">正常</el-button>
          <el-button type="warning" round size="small" plain v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="菜单操作">
        <template v-slot="$prop">
          <el-button round type="primary" plain size="small" @click="edit($prop.row)">编辑</el-button>
          <el-button type="warning" round size="small" plain @click="del($prop.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <v-dialog :info="info" ref="son"></v-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, reactive, ref, createApp } from "vue";
// 引入弹框组件
import vDialog from "./dialog.vue";
// 引入仓库
import { useStore } from "vuex";

import type { FormInstance } from 'element-plus'
import api from "@/request/api";
import { ElMessage } from "element-plus";
// 防误删
import {myConfirm} from '@/components/index'
const son: any = ref<FormInstance>()
// 注册组件
const app = createApp({});

const store = useStore();

//数据
const menulists = computed(() => store.state.menu.menulists);
// console.log(menulists);
// 弹窗状态
const info = reactive({ isshow: false });
//获取请求数据
onMounted(() => {
  store.dispatch("menu/getmenulist");
});

// 事件
const addmenu = () => {
  info.isshow = true
};
// 编辑
const edit = (obj: any) => {
  // 弹窗
  info.isshow = true;
  // 回显数据
  // console.log(son.value);
  son.value.setInfo(obj)

};
// 删除
const del = (id: any) => {
  // console.log(id);
  myConfirm(() => {
    api.menudelete({ id }).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg)
        // 刷新页面
        store.dispatch("menu/getmenulist");
      } else {
        ElMessage.error(res.msg)
      }
    })
  })

}
</script>

<style lang="scss" scoped>

</style>